<template>
	<view class="zh-u-mark" 
		:class="props.class"
		:style="markStyle"
	>
		<text>{{ Number(props.maxValue) - Number(props.value) >= 0?props.value: props.maxValue + '+' }}</text>
	</view>
</template>

<script setup lang="ts">
	const props = defineProps<{
		class?: string
		value?: string
		size?: string
		maxValue?:string
		fontSize: number
		type?:string
		color?:string
	}>()
	
	const markStyle = props.type === 'plain'? {
			'width': uni.upx2px(Number(props.size)) + 'px',
			'height': uni.upx2px(Number(props.size)) + 'px',
			'line-height':uni.upx2px(Number(props.size)) + 'px',
			'font-size': uni.upx2px(Number(props.fontSize))  + 'px',
			'background-color': '#fff',
			'color':props.color,
			'border': `1rpx solid ${props.color}`,
			'box-shadow': `0 0 0 1rpx #fff`,
			'border-radius': uni.upx2px(Number(props.size) / 1.5) + 'px',
			'z-index':10
		}:{
			'width': uni.upx2px(Number(props.size)) + 'px',
			'height': uni.upx2px(Number(props.size)) + 'px',
			'line-height':uni.upx2px(Number(props.size)) + 'px',
			'font-size': uni.upx2px(Number(props.fontSize)) + 'px',
			'background-color': props.color,
			'border': `1rpx solid ${props.color}`,
			'box-shadow': `0 0 0 1rpx #fff`,
			'border-radius':uni.upx2px(Number(props.size) / 1.5) + 'px',
			'color':'#fff'
		}
</script>

<style lang="scss" scoped>
	.zh-u-mark {
		text-align:center;
	}
</style>